<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button>发送</button>
<script>
    // 按钮点击之后，会禁用 disabled 为true
    // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
    // 里面秒数是有变化的，因此需要用到定时器
    // 定义一个变量，在定时器里面，不断递减
    // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
    var input = document.querySelector('input');
    var button = document.querySelector('button');
    var time = 3;
    // var timer = null;
    button.addEventListener('click',function () {
        this.disabled = true;
        var timer =  setInterval(function () {
            if (time == 0){
                //清除定时器和复原按钮
                clearInterval(timer);
                button.disabled = false;
                button.innerHTML = '发送';
                time = 3;//这个3需要重新开始
            }else {
                button.innerHTML = '还剩下' + time + '秒';
                time--;
            }
        },1000)

    })
</script>
</body>
</html>